<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="template">
<head>
    <title>Think管理系统 | 个人资料</title>
</head>
<link rel="stylesheet" type="text/css" th:href="@{/mg/css/table.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/mg/css/public.css}"/>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<link href="//cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdn.bootcss.com/bootstrap/3.0.1/js/bootstrap.js"></script>
<body>
<div th:fragment="content">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            个人资料
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li class="active">个人资料</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">
        <div class="row">
            <!-- left column -->
            <div class="col-md-6">
                <!-- general form elements -->
                <div class="box box-primary">

                    <div class="box-header with-border">
                        <h3 class="box-title">修改密码</h3>
                    </div>
                    <form class="form-horizontal" role="form" id="updatePasswordForm" method="PUT" action="/updatePassword">
                        <div class="box-body">
                            <div class="form-group">
                                <label for="oldPassword"  class="col-sm-3 control-label">原密码：</label>
                                <div class="col-sm-9">
                                    <input type="password" name="oldPassword" class="form-control" id="oldPassword"
                                           placeholder="原密码"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="newPassword" class="col-sm-3 control-label">新密码：</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" id="newPassword" name="newPassword"
                                           placeholder="新密码"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="renewPassword"  class="col-sm-3 control-label">确认新密码：</label>
                                <div class="col-sm-9">
                                    <input type="password" class="form-control" id="renewPassword"
                                           placeholder="确认新密码"/>
                                </div>
                            </div>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary pull-right" onclick="return onFormSubmit();">确认修改</button>
                        </div>
                        <!-- /.box-footer -->
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->
    <script type="text/javascript">
        $.ajaxSubmitForm = function (formSelector, successCallback) {
            $form = $(formSelector);
            $.ajax({
                url: $form.attr("action"),
                type: $form.attr("method"),
                data: $form.serialize(),
                dataType: "json",
                error: function (request) {
                    BootstrapDialog.alert("请求失败,TODO");
                },
                success: function (data) {
                    //先处理通用code，再交给successCallback回调处理
                    switch (data['code']) {
                        case 0:
                            if (successCallback) {
                                successCallback(data);
                            }
                            break;
                        case 1:
                            break;
                        case 2:
                            break;
                        case 10:
                            BootstrapDialog.show({
                                message: data['msg'],
                                buttons: [{
                                    label: "OK",
                                    action: function (dialogRef) {
                                        dialogRef.close();
                                        location.reload();
                                    }
                                }]
                            });
                            break;
                        default:
                            BootstrapDialog.alert(data['msg']);
                            break;
                    }
                }
            });
        }

        function onSuccess(data) {
            BootstrapDialog.alert(data['msg']);
        }

        function onFormSubmit() {
            setTimeout($.ajaxSubmitForm("#updatePasswordForm", onSuccess), 10);
            return false;
        }
    </script>
</div>
</body>
</html>